<template>
  <el-container class="home_container">
    <el-header>
      <div>
        <img>
        <span>小岛管理中心</span>
      </div>
      <el-button @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <el-aside>
        <!-- active-text-color="#409EFF" -->
        <el-menu background-color="#fff" text-color="#000" unique-opened router :default-active="activePath">
          <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
            <template slot="title">
              <span>{{item.authName}}</span>
            </template>
            <!-- @click.stop.native="menuTap($event)" -->
            <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
              <span class=" anim-span"></span>
              <span>{{subItem.authName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <cp-tabs></cp-tabs>
        <keep-alive :exclude="closingPage">
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import WorkTabs from './worktabs/WorkTabs.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    cpTabs: WorkTabs
  },
  data () {
    return {
      menulist: [
        {
          id: 101,
          authName: '岛主',
          path: 'admin',
          children: [
            // {
            //   id: 11,
            //   authName: '岛主信息',
            //   path: 'adminedit'
            // },
            {
              id: 12,
              authName: '登录信息',
              path: 'loginlog'
            }, {
              id: 13,
              authName: '操作信息',
              path: 'Operate'
            }, {
              id: 14,
              authName: '用户准则',
              path: 'rule'
            }
          ]
        }, {
          id: 102,
          authName: '游客管理',
          children: [
            {
              id: 21,
              authName: '游客列表',
              path: 'users'
            }
          ]
        }, {
          id: 103,
          authName: '怪岛管理',
          children: [
            {
              id: 31,
              authName: '博文列表',
              path: 'bloglist'
            },
            {
              id: 32,
              authName: '图片列表',
              path: 'piclist'
            },
            {
              id: 33,
              authName: '音频列表',
              path: 'miclist'
            }
          ]
        }, {
          id: 104,
          authName: '岛民记录',
          children: [
            {
              id: 41,
              authName: '登岛数据',
              path: 'count'
            },
            {
              id: 42,
              authName: '岛民信箱',
              path: 'email'
            }
          ]
        }
      ],
      activePath: '/count'
    }
  },
  computed: {
    ...mapGetters(['closingPage'])
  },
  methods: {
    logout () {
      localStorage.removeItem('access_token')
      localStorage.removeItem('refresh_token')
      // clearCookie('access_token')
      // clearCookie('refresh_token')
      this.$router.push('/login')
      this.$store.commit('ClearTabs')
    }
    // menuTap (e) {
    //   if (e.target.nodeName === 'SPAN') {
    //     return
    //   }
    //   const ripples = e.target.children[0]
    //   ripples.classList.add('animated')
    //   const x = e.clientX - e.target.offsetLeft
    //   const y = e.clientY - this.getTop(e.target)
    //   ripples.style.top = y + 'px'
    //   ripples.style.left = x + 'px'
    //   setTimeout(() => {
    //     ripples.classList.remove('animated')
    //   }, 600)
    // },
    // getTop (el) {
    //   let realTop = el.offsetTop
    //   let parent = el.offsetParent
    //   while (parent !== null) {
    //     realTop += parent.offsetTop
    //     parent = parent.offsetParent
    //   }
    //   return realTop
    // }
    // v-on:click="saveNavState('/'+subItem.path)"
    // saveNavState (activePath) {
    //   window.sessionStorage.setItem('activePath', activePath)
    //   this.activePath = activePath
    // }
  }
}
</script>
<style lang="less" scoped>
.home_container {
  height: 100%;
}
.el-header {
  background-color: #70a1ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
  }
}
.el-aside {
  background-color: #fff;
  .el-menu {
    border-right: none;
    .el-menu-item {
      overflow: hidden;
    }
  }
}
.el-main {
  background-color: #dfe4ea;
  min-width: 1280px;
}
.anim-span {
  position: absolute;
  background: #70a1ff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  z-index: 3;
  opacity: 0;
}
.animated {
  animation: animate 0.6s ease-in infinite;
}
@keyframes animate {
  0% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}
</style>
